<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Document</title>
    <style>
        #demo{
            font-weight: bold;
        }
    </style>
</head>
<body>
    <button id="btn1">放大</button>
    <button id="btn2">缩小</button>
    <p id="demo" style="font-size:10px;">Javascript</p>

    <hr />

    <p id="demo2" style="font-size:10px;font-weight:bold;">Javascript</p>
</body>
</html>
<script>
    var btn1 = document.getElementById('btn1')
    var btn2 = document.getElementById('btn2')
    var demo = document.getElementById('demo')

    btn1.onclick = function()
    {
        var num = parseInt(demo.style.fontSize)
        demo.style.fontSize = `${num + 5}px`
    }

    btn2.onclick =function()
    {
        var num = parseInt(demo.style.fontSize) 
        demo.style.fontSize = `${num - 5}px`
    }

    var demo2 =document.getElementById('demo2')
    var Timer;

    function big()
    {
        var num = parseInt(demo2.style.fontSize)
        console.log(num)

        if(num > 100)
        {
            console.log('已经到达极限，需要停止')
            clearInterval(Timer)
            Timer = setInterval(small,10)
            return false
        }else
        {
            demo2.style.fontSize =`${num +1}px`
        }
    }

    function small()
    {
        var num =parseInt(demo2.style.fontSize)

        if(num <=10)
        {
            clearInterval(Timer)

            Timer =setInterval(big,10)

            return false
        }else{
            demo2.style.fontSize =`${num - 1}px`
        }
    }

    Timer =setInterval(big,10)

</script>